<template>
  <div class="content-box">
    <div class="w-card head-box">
      <div class="income-all">
        佣金/积分累计发放
      </div>

      <div class="jine-box">
        <div>
          <div class="jine-o">
            <span>累计入账佣金(元)：</span>
            <span style="font-size: 20px;color: #000000;">{{ numFormat(incomeForm.incomeUnfreezenTotal || '0') }}</span>
          </div>
          <div class="jine-th">
            <div>
              <span>可提现佣金(元)</span>
              <span style="font-size: 16px;color: #000000;">{{ numFormat(incomeForm.incomerest || '0') }}</span>
            </div>
            <div>
              <span>已提现佣金(元)</span>
              <span style="font-size: 16px;color: #000000;">{{ numFormat(incomeForm.incomewithdraw || '0') }}</span>
            </div>
            <!-- <div>
              <span>团队激励(元)</span>
              <span style="font-size: 16px;color: #000000;">{{ numFormat(incomeForm.incomeUnfreezenTotalTeam || '') }}</span>
            </div> -->
          </div>
        </div>
        <div>
          <div class="jine-o">
            <span>剩余积分：</span>
            <span style="font-size: 20px;color: #000000;">{{ numFormat(incomeForm.leftFeeJifen || '0') }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="w-card body-box">
      <div class="title-box">
        <span class="title-text">代理商资产列表</span>
        <el-button type="primary" plain @click="exportHandle(1)">导出</el-button>
      </div>
      <div class="my-search-box">
        <div>
          <span>代理商名称：</span>
          <el-input v-model="searchForm.shopName" clearable placeholder="请输入代理商名称" />
        </div>
        <div class="f-ml-20">
          <el-button @click="searchHandle" type="primary">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table :max-height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
          :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe @sort-change="handleSort">
          <el-table-column type="index" width="55" label="序号" align="center" />
          <el-table-column prop="shopName" label="代理商名称" align="center">
            <template v-slot="scope">
              {{ scope.row.shopName || '' }}
            </template>
          </el-table-column>
          <el-table-column prop="incomeTotal" label="累计佣金总额(元)" align="center" sortable="custom">
            <template v-slot="scope">
              {{ numFormat(scope.row.incomeTotal || '0') }}
            </template>
          </el-table-column>
          <el-table-column prop="incomerest" label="可提现佣金(元)" align="center" sortable="custom">
            <template v-slot="scope">
              {{ numFormat(scope.row.incomerest || '0') }}
            </template>
          </el-table-column>
          <el-table-column prop="incomewithdraw" label="已提现佣金(元)" align="center" sortable="custom">
            <template v-slot="scope">
              {{ numFormat(scope.row.incomewithdraw || '0') }}
            </template>
          </el-table-column>
          <el-table-column prop="leftFeeJifen" label="剩余积分" align="center" sortable="custom">
            <template v-slot="scope">
              {{ numFormat(scope.row.leftFeeJifen || '0') }}
            </template>
          </el-table-column>
        </el-table>
        <div class="my-table-footer">
          <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
            :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import api from './api'
import { warningDeal, numFormat, getWindowWidthAndHeight, getDateTime, BlobDownLoad } from '@/utils/utils'
import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()

    const state = reactive({
      popLoading: false,

      incomeForm: {},

      searchForm: {
        "contactsPhone": "",
        "orderBy": "",
        "shopName": "",
      },

      page: 1,
      size: 10,
      total: 0,
      tableHeight: 0,
      tableData: [],
    })

    function getIncomeAll() {
      const obj = {

      }
      api.incomeShopLoadAll(obj).then(res => {
        if (res.code == '200') {
          state.incomeForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getTableData() {
      const obj = {
        page: state.page,
        size: state.size,
        ...state.searchForm,
      }
      api.incomeShopList(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function searchHandle() {
      state.page = 1
      getTableData()
    }

    function resetHandle() {
      state.searchForm = {}
      searchHandle()
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    function pageJump(path, data = {}) {
      router.push({ path, query: { ...data } })
    }

    function exportHandle() {
      const obj = {
        page: state.page,
        size: state.size,
        ...state.searchForm,
      }
      api.incomeShopListDown({ ...obj, responseType: "blob" }).then(res => {
        const _fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('=')[1])
        BlobDownLoad(res, _fileName)
      }).catch(err => {
        console.log(err)
      })
    }

    const handleSort = (e) => {
      let { prop, order } = e
      console.log(prop)
      switch (prop) {
        case "incomeTotal":
          if (order == "descending") {
            state.searchForm.orderBy = 'b.income_unfreezen_total desc'
          } else if (order == "ascending") {
            state.searchForm.orderBy = 'b.income_unfreezen_total asc'
          }
          break;
        case "incomerest":
          if (order == "descending") {
            state.searchForm.orderBy = 'b.income_rest desc'
          } else if (order == "ascending") {
            state.searchForm.orderBy = 'b.income_rest asc'
          }
          break;
        case "incomewithdraw":
          if (order == "descending") {
            state.searchForm.orderBy = 'b.income_withdraw desc'
          } else if (order == "ascending") {
            state.searchForm.orderBy = 'b.income_withdraw asc'
          }
          break;
        case "leftFeeJifen":
          if (order == "descending") {
            state.searchForm.orderBy = 'a.left_fee_jifen desc'
          } else if (order == "ascending") {
            state.searchForm.orderBy = 'a.left_fee_jifen asc'
          }
          break;
      }

      searchHandle()
    }

    onMounted(() => {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 470
      getIncomeAll()
      getTableData()
    })

    return {
      ...toRefs(state),
      numFormat,
      searchHandle,
      resetHandle,
      getDateTime,
      handleCurrentChange,
      handleSizeChange,
      pageJump,
      exportHandle,
      handleSort,
    }
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  height: 100%;
  display: flex;
  flex-flow: column;
  gap: 10px;
  overflow: hidden;
  overflow-y: auto;
  .head-box {
    box-sizing: border-box;
    padding: 20px;
    .income-all {
      font-size: 14px;
      font-weight: bold;
    }

    .jine-box {
      margin-top: 20px;
      display: flex;
      gap: 20px;
      box-sizing: border-box;
      padding: 0 20px;
      > div {
        flex-grow: 1;
        background-color: rgba($color: #0081ff, $alpha: 0.1);
        box-sizing: border-box;
        padding: 20px;
      }
    }
    .jine-o {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #727780;
    }

    .jine-t {
      display: flex;
      flex-flow: column;
      justify-content: space-around;
      > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: #727780;
      }
    }

    .jine-th {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      > div {
        flex-grow: 1;
        font-size: 12px;
        color: #727780;
        display: flex;
        flex-flow: column;
        cursor: pointer;
        &:not(:last-of-type) {
          border-right: 1px solid #cccccc;
        }
      }
    }
  }
  .body-box {
    flex-grow: 1;
    box-sizing: border-box;
    padding: 20px;
    .title-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      > .title-text {
        font-size: 14px;
        font-weight: bold;
      }
    }
    .my-search-box {
      box-sizing: border-box;
      padding: 20px 20px 20px 0;
      padding-bottom: 0;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;

      > div {
        width: 350px;
        display: flex;
        align-items: center;

        > span {
          flex-shrink: 0;
          width: 120px;
          text-align: right;
        }
      }

      .datebox {
        width: 450px;
      }
    }
  }
}

.imp-price {
  font-size: 18px;
  font-weight: bold;
}

.pop-content-box {
  background-color: #fff8dd;
  box-sizing: border-box;
  padding: 10px;
  .pop-content {
    font-size: 12px;
    > div {
      margin-top: 5px;
    }
  }
}

.table-box {
  margin-top: 10px;
}
.my-table-footer {
  display: flex;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 10px;
}
</style>